<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../../js/echarts.min.js" charset="utf-8"></script>
</head>
<style>
    .div-1 {
        width: 100%;
        height: 670px;
    }
    .div-1-1 {
        width: 50%;
        height: 100%;
        float: left;
    }
    .div-1-2 {
        width: 50%;
        height: 100%;
        float: left;
    }
</style>
<body>
    <div class="div-1">
        <div class="div-1-1" id="pie">
            
        </div>
        <div class="div-1-2" id="bar">

        </div>
    </div>
    <script>
        var chartDom = document.getElementById('pie');
        var myChart = echarts.init(chartDom);
        var option;
        $.ajax({
      url: "http://localhost:8080/natinfo/echartBar1",
      data: {},
      success: function (result) {
        var sexList = [];
                var sexCount = [];
                var arr = result.data.sexBar;
                for (var i = 0; i < arr.length; i++) {
                    sexList.push(arr[i].name);
                    sexCount.push(arr[i].value);
                }
                option = {
                    title:{
                        text:'居民对应的检测数'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: sexList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: sexCount,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };

                myChart.setOption(option);
      },
      dataType: "json"
    });

    var chartDom1 = document.getElementById('bar');
        var myChart1 = echarts.init(chartDom1);
        var option1;
        $.ajax({
      url: "http://localhost:8080/natinfo/echartBar2",
      data: {},
      success: function (result1) {
        var sobj1 = [];
        var arr1 = result1.data.sexPi;
        for (var i = 0; i < arr1.length; i++) {
          sobj1.push(arr[i]);
        }
        console.log(sobj1);
        option1 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '阳性与阴性数量',
              type: 'pie',
              title:'阳性与阴性数量',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: sobj1,
            }
          ]
        };
        myChart.setOption(option1);
      },
      dataType: "json"
    });

    </script>
</body>

</html>